<template>
  <div class="view-container">
    <div class="filter-container">
      <el-row
        :gutter="40"
        style="margin:0px;"
      >
        <el-col :lg="20">
          <el-form
            :inline="true"
            :model="filterData"
            label-position="right"
            size="small"
            class="filter-form-inline"
          >
            <el-row
              :gutter="40"
              style="margin-left: 0px; margin-right: 0px"
            >
              <el-col
                :lg="5"
                :xs="4"
              >
                <el-form-item
                  label="业务类型"
                  style="width: 100%"
                >
                  <el-select
                    v-model="filterData.productStatus"
                    clearable
                    style="width: 100%"
                    placeholder="请选择业务类型"
                    @change="listSearch"
                  >
                    <el-option
                      v-for="(item, idx) in dictMap?.product_status"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    />

                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :lg="6"
                :xs="5"
              >
                <el-form-item
                  label="关键字"
                  style="width: 100%"
                >
                  <el-input
                    v-model="filterData.keyWord"
                    clearable
                    placeholder="输入产品名称、通用名、批准文号关键字查询"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :lg="4"
                :xs="4"
              >
                <el-form-item style="width: 100%">
                  <el-button class="border-btn">重置</el-button>
                  <el-button
                    type="primary"
                    class="main-btn"
                    @click="listSearch"
                  >搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <div class="list-container">
        <table-tools>
          <template #left>
            <el-button
              class="main-btn"
              size="small"
              type="primary"
              @click="toDetail"
            >详情</el-button>
          </template>
          <template #btn>
            <div style="display: flex; justify-content: flex-end">
              <table-cell-setting
                :table-option="tableOption"
                :checked="checkListData"
                @checkList="checkList"
              />
            </div>
          </template>
        </table-tools>
        <table-view
          header-cell-class-name="table-header"
          :data="listData"
          border
          :cell-style="cellStyle"
          @row-click="rowClick"
        >
          <el-table-column
            prop="productNumber"
            label="产品编号"
            fixed="left"
            :min-width="100"
            header-align="center"
          />
          <el-table-column
            :min-width="120"
            prop="approvalNumber"
            label="批准文号"
            align="center"
            header-align="center"
          />
          <el-table-column
            :min-width="80"
            prop="packSpecs"
            label="包装规格"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="middle_pkg"
            label="中包装"
            header-align="center"
            align="center"
          >
            <template #default="scope">
              <div>
                {{ scope.row.mPackNum }}{{ scope.row.sellUnit }}/{{ scope.row.mPackUnit }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :min-width="100"
            prop="marketPrice"
            label="市场价（元）"
            header-align="center"
            align="center"
          />
          <el-table-column
            :min-width="100"
            prop="medicalInsurancePrice"
            label="医保价（元）"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="productLine"
            label="所属产品线"
            :min-width="100"
            header-align="center"
          >
            <template #default="scope">
              <span> {{ getLabel('product_line', scope.row.productLine) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="creatorName"
            label="创建人"
            :min-width="140"
            header-align="center"
            align="center"
            sortable
          />
          <el-table-column
            prop="createdAt"
            label="创建时间"
            :min-width="140"
            header-align="center"
            align="center"
            sortable
          >
            <template #default="scope">
              <span> {{ dateFormat('yyyy-mm-dd HH:MM', scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productStatus"
            label="状态"
            :min-width="120"
            header-align="center"
            align="center"
          >
            <template #default="scope">
              <div class="status">{{ 111 }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            header-align="center"
            width="280"
          >
            <template #default="scope">
              操作
            </template>
          </el-table-column>
        </table-view>
        <Pagination
          v-model:page="filterData.page"
          v-model:limit="filterData.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance, inject, reactive, toRefs} from 'vue'
import {useRouter} from 'vue-router'

export default {
  setup(props, context) {
    const api = inject('api')
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    var reactiveData = reactive({
      listData: [],
      total: 0,
      filterData: {
        dateRange: '',
        productStatus: '',
        keyWord: '',
        page: 1,
        pageSize: 20,
      },
    })
    const cellStyle = (row) => {
      if (row.column.label === '操作') return
      return 'cursor: pointer;'
    }
    const rowClick = (row, column, event) => {
      console.log(row, column.label, event)
      if (column.label === '操作') return
    }
    const toDetail = () => {
      console.log(2121)
      router.push({
        name: 'abnormalFlowDetail',
      })
    }
    const getList = () => {
      console.log(2121)
    }
    return {
      ...toRefs(reactiveData),
      cellStyle,
      rowClick,
      toDetail,
      getList,
    }
  },
}
</script>

<style>
</style>
